<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <!-- 搜索 -->
        <el-form ref="roomPage" :model="roomPage" size="small" :inline="true" label-width="68px">
          <el-row :gutter="10" class="mb8">
            <el-form-item label="基地名称">
              <el-select v-model="roomPage.capsuleInfoId" clearable placeholder="请选择基地" @change="onchangeSpace">
                <el-option v-for="item in spaceRoomList" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="roomPage_status" placeholder="请选择状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-row>
          <!-- 新增 -->
          <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增</el-button>
            </el-col>
          </el-row> -->
        </el-form>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="tableData" ref="tableData" border style="width: 100%" class="mb20">
          <el-table-column prop="capsuleInfoTitle" label="项目" align="center">
          </el-table-column>
          <el-table-column prop="capsuleSpecsName" label="名称" align="center">
          </el-table-column>
          <el-table-column prop="itemKey" label="规格名称" align="center">
          </el-table-column>
          <el-table-column prop="name" label="规格设置" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <div :style="{color:scope.row.status == 0 ? '#5ac725' : '#909399'}">
                {{scope.row.status == 0 ? '正常' : '停用'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="210" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document"
                @click.stop="spaceRoomDetail_(scope.row.id , types = 'detail')">详情</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit"
                @click.stop="spaceRoomDetail_(scope.row.id , types = 'edit')">编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="roomPage.pageNum" :page-size="roomPage.pageSize"
      layout="prev, pager, next" :total="total">
    </el-pagination>
    <!-- 新增和修改 -->
    <el-dialog :title="types == 'add'?'新增房间规格':(types == 'edit'?'编辑房间':'房间详情')" :visible.sync="roomVisibles" width="41%"
      :before-close="handleClose">
      <el-form ref="roomInfoData" :model="roomInfoData" label-width="120px" :rules="rules">
        <el-form-item label="太空舱基地" prop="capsuleInfoId">
          <el-select v-model="roomInfoData.capsuleInfoId" placeholder="请选择对应的基地" :disabled="flag" @change="onchange">
            <el-option v-for="item in spaceRoomList" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间规格" prop="itemKey">
          <el-select v-model="roomInfoData.itemKey" placeholder="请选择房间规格" @change="onchangeKey">
            <el-option v-for="item in stayTypeList" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规格配置名称" prop="name">
          <el-input v-model="roomInfoData.name" placeholder="请输入规格配置名称" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格配置值" prop="settingValue">
          <el-input v-model="roomInfoData.settingValue" placeholder="请输入规格配置值,多个请使用逗号隔开" />
        </el-form-item>
        <el-form-item label="是否停用" prop="room_status">
          <el-switch v-model="room_status" active-color="#13ce66" inactive-color="#d1d1d1">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="roomVisibles = false">取 消</el-button>
        <el-button type="primary"
          @click="types == 'add' ? onModifyPrice('roomInfoData') : onModifyPriceEdit('roomInfoData')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import cos from 'highlight.js/lib/languages/cos'
  import {
    getSpaceRoomList,
    getSpaceRoomDetail,
    spaceRoomModify,
    spaceRoomDelete
  } from '@/api/space/roomSpecifications'
  import {
    spaceRoomType,
    spaceRoomDetail
  } from '@/api/space/spaceRoom'
  import {
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'

  export default {
    data() {
      return {
        id: '',
        capsuleInfoId: '',
        flag: false,
        loading: false,
        roomVisibles: false,
        types: 'add',
        room_status: true,
        tableData: [],
        tiemValue: '',
        roomPage_status: '',
        roomPage_capsuleInfoId: '',
        roomPage: {
          // "capsuleInfoId": 0,
          // "capsuleSpecsId": 0,
          "createBeginTime": "",
          "createEndTime": "",
          "itemKey": "",
          "pageNum": 1,
          "pageSize": 10,
          "status": '99'
        },
        total: 0,
        roomInfoData: {
          capsuleInfoId: '',
          // capsuleSpecsId: '',
          itemKey: '',
          name: '',
          settingValue: '',
          status: ''
        },
        stayTypeList: [],
        spaceRoomList: [],
        rules: {
          capsuleInfoId: [{
            required: true,
            message: '请选择太空舱基地',
            trigger: 'blur'
          }],
          itemKey: [{
            required: true,
            message: '请选择房间规格',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '请输入规格配置名称',
            trigger: 'blur'
          }],
          settingValue: [{
            required: true,
            message: '请输入规格配置值,多个请使用逗号隔开',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getSpaceRoomList()
      this.id = this.$route.query.id
      this.capsuleInfoId = this.$route.query.capsuleInfoId //太空舱基地id
      if (this.$route.query.flag === 'true') {
        this.flag = true
        this.roomVisibles = true
      } else {
        this.flag = false
      }
      spaceRoomType('capsule_specs_type_item').then(res => { // 获取子规格
        this.stayTypeList = res.data
      })
      capsuleInfoSelects().then(res => { //太空舱基地
        this.spaceRoomList = res.data
        this.spaceRoomList.forEach(item => {
          if (item.value == this.capsuleInfoId) {
            this.roomInfoData.capsuleInfoId = item.label
          }
        })
      })
    },
    methods: {
      getSpaceRoomList() {
        this.loading = true
        getSpaceRoomList(this.roomPage).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
          if (this.$route.query.types == 'edit') {
            if (this.tableData.length > 0) {
              this.tableData.map(item => {
                if (this.$route.query.capsuleInfoId * 1 == item.capsuleInfoId) {
                  this.getSpaceRoomDetail(item.id)
                }
              })
            }
          }
          // console.log(res)
        })
      },
      handleClose() {
        this.roomVisibles = false
        this.roomInfoData = {
          capsuleInfoId: '',
          capsuleSpecsId: '',
          itemKey: '',
          name: '',
          settingValue: '',
          status: ''
        }
      },
      onchangeKey(e){
        this.stayTypeList.forEach(item => {
          if (e == item.dictValue) {
           this.roomInfoData.name = item.dictLabel
          }
        })
      },
      //新增和修改
      spaceRoomModify(data) {
        spaceRoomModify(data).then(res => {
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.getSpaceRoomList()
          this.roomVisibles = false
          this.roomInfoData = {
            capsuleInfoId: '',
            capsuleSpecsId: '',
            itemKey: '',
            name: '',
            settingValue: '',
            status: ''
          }
          this.$router.push({ path: "/spaceSys/specifications" })
        })
      },
      spaceRoomDetail(id) {
        spaceRoomDetail(id).then(res => {
          this.roomInfoData.capsuleSpecsId = res.data.id
          this.spaceRoomModify(this.roomInfoData)
        })
      },
      onModifyPrice(roomInfoData) {
        if (this.room_status) {
          this.roomInfoData.status = 0
        } else {
          this.roomInfoData.status = 1
        }
        this.$refs[roomInfoData].validate((valid) => {
          if (valid) {
            this.roomInfoData.capsuleSpecsId = this.id
            this.roomInfoData.capsuleInfoId = this.capsuleInfoId
            this.spaceRoomModify(this.roomInfoData)
          }
        })
      },
      onModifyPriceEdit(roomInfoData) {
        if (this.room_status) {
          this.roomInfoData.status = 0
        } else {
          this.roomInfoData.status = 1
        }
        this.$refs[roomInfoData].validate((valid) => {
          if (valid) {
            this.spaceRoomDetail(this.roomInfoData.capsuleInfoId)
          }
        })
      },
      onchangeSpace(e) {
        // this.spaceRoomDetail(e)
      },
      onchange() {
        this.roomInfoData.itemKey = ''
        this.roomInfoData.name = ''
        this.roomInfoData.settingValue = ''
      },
      add() {
        this.types = 'add'
        this.flag = false
        this.roomInfoData = {
          capsuleInfoId: '',
          capsuleSpecsId: '',
          itemKey: '',
          name: '',
          settingValue: '',
          status: ''
        }
        this.roomVisibles = true
      },
      // 查看和修改
      getSpaceRoomDetail(id) {
        getSpaceRoomDetail(id).then(res => {
          this.stayTypeList.forEach(item => {
            if (res.data == item.dictValue) {
              parmas.itemKey = item.dictLabel
            }
          })
          // console.log("parmas-->",res.data)
          if (res.data.status == 0) {
            this.room_status = true
          } else {
            this.room_status = false
          }
          this.roomInfoData = res.data
        })
      },
      handleSizeChange(val) {
        this.roomPage.pageNum = val
        this.getSpaceRoomList()
      },
      handleCurrentChange(val) {
        this.roomPage.pageNum = val
        this.getSpaceRoomList()
      },
      onSubmitsear() {
        if (this.tiemValue.length > 0) {
          this.roomPage.createBeginTime = this.tiemValue[0]
          this.roomPage.createEndTime = this.tiemValue[1]
        }
        if (this.tiemValue == null) {
          this.roomPage.createBeginTime = ''
          this.roomPage.createEndTime = ''
        }
        this.roomPage.status = this.roomPage_status
        if (this.roomPage_status == '') {
          this.roomPage.status = '99'
        }
        // console.log(this.roomPage)
        this.getSpaceRoomList()
      },
      resetQuery() {
        this.roomPage = {
          "createBeginTime": "",
          "createEndTime": "",
          "itemKey": "",
          "pageNum": 1,
          "pageSize": 10,
          "status": '99'
        }
        this.getSpaceRoomList()
      },
      spaceRoomDetail_(id) {
        this.roomVisibles = true
        this.getSpaceRoomDetail(id)
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          spaceRoomDelete(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getSpaceRoomList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
